{% extends "layout.html" %}

{% block content %}
<script src="../static/js/jquery.min.js" type="text/javascript" charset='utf-8'></script>
<script src="../static/js/echarts.js" charset='utf-8'></script>

<script type="text/javascript">
    // 初始化界面
    $(function () {

        $('#li_1').attr('class', '');
        $('#li_2').attr('class', 'active');
        $('#li_3').attr('class', '');
        $('#li_4').attr('class', '');
        $('#li_5').attr('class', '');
        $('#li_6').attr('class', '');
        $('#li_7').attr('class', '');

        $.get('/job_hangye_analysis', {},
            function (data) {
                // 基于准备好的dom，初始化echarts实例
                var dom = document.getElementById("main1");
                var myChart = echarts.init(dom);

                var series_data = [];
                for (var i = 0; i < data['细分行业'].length; i++) {
                    series_data.push({value: data['岗位数'][i], name: data['细分行业'][i]})
                }
                console.log(series_data);

                var option = {
                    title: {
                        left: 'center',
                        text: '当前不同细分行业在招岗位数分布情况',
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    series: [
                        {
                            name: '岗位数',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '50%'],
                            data: series_data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }

                // 基于准备好的dom，初始化echarts实例
                var dom = document.getElementById("main2");
                var myChart = echarts.init(dom);

                var salary = [];
                for (var i = 0; i < data['平均薪资'].length; i++)
                    salary.push(data['平均薪资'][i].toFixed(2))

                option = {
                    title: {
                        left: 'center',
                        text: '不同细分行业的平均薪资(/元)排名分布',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '1%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        name: '元',
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: data['细分行业2'],
                        "axisLabel": {
                            interval: 0
                        }
                    },
                    series: [
                        {
                            type: 'bar',
                            itemStyle: {
                                color: '#19CAAD'
                            },
                            data: salary
                        }
                    ]
                };

                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            }
        );

        $('#myTab').find("li").each(function () {
            $(this).click(function () {
                $('#echarts_content2').empty();
                const key = $(this).text();

                $('#echarts_content2').append(
                    '<div class="row placeholders">' +
                    '<div class="col-xs-6 placeholder" style="height:550px;" id="main3"></div>' +
                    '<div class="col-xs-6 placeholder" style="height:550px;" id="main4"></div>' +
                    '</div>'
                );

                $.get('http://127.0.0.1:5000/dili_fengqu_analysis/' + key, {},
                    function (data) {
                        console.log(data);
                        // 基于准备好的dom，初始化echarts实例
                        var dom = document.getElementById("main3");
                        var myChart = echarts.init(dom);

                        var series_data = [];
                        for (var i = 0; i < data['细分行业'].length; i++) {
                            series_data.push({value: data['岗位数'][i], name: data['细分行业'][i]})
                        }
                        console.log(series_data);

                        var option = {
                            title: {
                                left: 'center',
                                text: key + '地区当前不同细分行业在招岗位数分布情况',
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b} : {c} ({d}%)'
                            },
                            series: [
                                {
                                    name: '岗位数',
                                    type: 'pie',
                                    radius: '55%',
                                    center: ['50%', '50%'],
                                    data: series_data,
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };

                        if (option && typeof option === "object") {
                            myChart.setOption(option, true);
                        }

                        // 基于准备好的dom，初始化echarts实例
                        var dom = document.getElementById("main4");
                        var myChart = echarts.init(dom);

                        var salary = [];
                        for (var i = 0; i < data['平均薪资'].length; i++)
                            salary.push(data['平均薪资'][i].toFixed(2))

                        option = {
                            title: {
                                left: 'center',
                                text: key + '地区不同细分行业的平均薪资(/元)排名分布',
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'shadow'
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '1%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                name: '元',
                                type: 'value',
                                boundaryGap: [0, 0.01]
                            },
                            yAxis: {
                                type: 'category',
                                data: data['细分行业2'],
                                "axisLabel": {
                                    interval: 0
                                }
                            },
                            series: [
                                {
                                    type: 'bar',
                                    itemStyle: {
                                        color: '#19CAAD'
                                    },
                                    data: salary
                                }
                            ]
                        };

                        if (option && typeof option === "object") {
                            myChart.setOption(option, true);
                        }
                    }
                );

            })
        });

        $.get('/fengqu_salary_analysis', {},
            function (data) {
                // 基于准备好的dom，初始化echarts实例
                var dom = document.getElementById("main5");
                var myChart = echarts.init(dom);

                var high_salary = [];
                for (var i = 0; i < data['high_salary'].length; i++)
                    high_salary.push(data['high_salary'][i].toFixed(2))

                var low_salary = [];
                for (var i = 0; i < data['low_salary'].length; i++)
                    low_salary.push(data['low_salary'][i].toFixed(2))

                var option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['最高薪资', '最低薪资']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            dataView: {readOnly: false},
                            magicType: {type: ['line', 'bar']},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: data['fengqu']
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} 元'
                        }
                    },
                    series: [
                        {
                            name: '最高薪资',
                            type: 'line',
                            data: high_salary,
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        },
                        {
                            name: '最低薪资',
                            type: 'line',
                            data: low_salary,
                            markPoint: {
                                data: [
                                    {name: '最低', value: -2, xAxis: 1, yAxis: -1.5}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'},
                                    [{
                                        symbol: 'none',
                                        x: '90%',
                                        yAxis: 'max'
                                    }, {
                                        symbol: 'circle',
                                        label: {
                                            position: 'start',
                                            formatter: '最大值'
                                        },
                                        type: 'max',
                                        name: '最高点'
                                    }]
                                ]
                            }
                        }
                    ]
                };

                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            }
        );
    });
</script>

<div class="">
    <!--右边展示-->
    <h3 class="page-header" style="margin-left: 220px;">各大细分行业招聘岗位数与薪资分布</h3>
    <div class="" id="echarts_content" style="margin-top: 20px;">
        <div class="row placeholders">
            <div class="col-xs-6 placeholder" style="height:600px;" id="main1"></div>
            <div class="col-xs-6 placeholder" style="height:600px;" id="main2"></div>
        </div>
    </div>

    <h3 class="page-header" style="margin-left: 220px; margin-top: -20px;">各地理分区的细分行业招聘岗位数与薪资分布</h3>
    <ul id="myTab" class="nav nav-tabs" style="font-size: 20px; margin-left: 220px;">
        <li class="active"><a id="华东" data-toggle="tab"><b>华东</b></a></li>
        <li><a id="华北" data-toggle="tab"><b>华北</b></a></li>
        <li><a id="华中" data-toggle="tab"><b>华中</b></a></li>
        <li><a id="华南" data-toggle="tab"><b>华南</b></a></li>
        <li><a id="西南" data-toggle="tab"><b>西南</b></a></li>
        <li><a id="西北" data-toggle="tab"><b>西北</b></a></li>
        <li><a id="东北" data-toggle="tab"><b>东北</b></a></li>
    </ul>
    <div class="" id="echarts_content2" style="margin-top: 20px;">
        <div class="col-xs-6 placeholder" style="height:550px;" id="main3"></div>
        <div class="col-xs-6 placeholder" style="height:550px;" id="main4"></div>
    </div>

    <h3 class="page-header" style="margin-left: 220px; margin-top: -20px;">各地理分区的平均薪资对比</h3>
    <div class="container" style="margin-top: 20px;">
        <div class="col-xs-12 placeholder" style="height:550px;" id="main5"></div>
    </div>

</div>

{% endblock %}
